@import url(./base.less);
@import url(./normalize.less);

@rootSize: 37.5rem;
body {
  width: 100%;
  height: 100%;
  padding: (60 / @rootSize) (15 / @rootSize);
  background-color: #fcfbfb;
}
header {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 (15 / @rootSize);
  height: (46 / @rootSize);
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: (13 / @rootSize);
  box-shadow: 0 (1 / @rootSize) (20 / @rootSize) rgba(0, 0, 0, 0.3);
  a {
    width: (250 / @rootSize);
    height: (32 / @rootSize);
    border-radius: (16 / @rootSize);
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    color: #a4a4a4;
    font-size: (12 / @rootSize);
    img {
      margin: 0 (16 / @rootSize);
      width: (14 / @rootSize);
    }
  }
  img {
    width: (18 / @rootSize);
  }
}

.lunbo {
  height: (18 / @rootSize);

  ul {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    li {
      width: (8 / @rootSize);
      margin: 0 (5 / @rootSize);
    }
  }
}
.nav {
  margin: (12 / @rootSize) 0 (36 / @rootSize);
  ul {
    display: flex;
    justify-content: space-between;
    li {
      width: (168 / @rootSize);
      height: (70 / @rootSize);
    }
  }
}
.title1 {
  height: (18 / @rootSize);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: (20 / @rootSize);
  h2 {
    font-size: (18 / @rootSize);
  }
  a {
    img {
      height: (14 / @rootSize);
    }
  }
}
.content1 {
  width: 100%;
  height: (185 / @rootSize);
  background-color: #fff;

  ul {
    display: flex;
    justify-content: space-between;
    li {
      img {
        width: (168 / @rootSize);
        height: (115 / @rootSize);
      }
      h4 {
        margin-top: (10 / @rootSize);
        font-size: (14 / @rootSize);
        color: #333;
      }
      p {
        color: #999;
        font-size: (12 / @rootSize);
        margin-top: (5 / @rootSize);
      }
      span {
        font-size: (12 / @rootSize);
        color: #f39800;
        font-weight: 600;
      }
    }
  }
}
.ad {
  margin: (30 / @rootSize) 0 (36 / @rootSize);
}
.title2 {
  height: (18 / @rootSize);
  font-size: (14 / @rootSize);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: (24 / @rootSize);
  color: #999;
  h2 {
    font-size: (18 / @rootSize);
  }
  .right {
    display: flex;
    span {
      width: (30 / @rootSize);
      margin-left: (25 / @rootSize);
      img {
        width: (10 / @rootSize);
        margin-left: (8 / @rootSize);
        margin-top: (5 / @rootSize);
      }
    }
    .active {
      color: #333;
    }
  }
}

section {
  li {
    height: (115 / @rootSize);
    a {
      color: #333;
      display: flex;
      .pic {
        img {
          width: (110 / @rootSize);
          margin-right: (5 / @rootSize);
        }
      }
      .text {
        h3 {
          font-size: (14 / @rootSize);
        }
        p {
          font-size: (12 / @rootSize);
          color: #a5a5a5;
          margin: (5 / @rootSize) 0;
          span {
            display: inline-block;
            width: (45 / @rootSize);
            height: (20 / @rootSize);
            border: 1px solid #a5a5a5;
            text-align: center;
            line-height: (16 / @rootSize);
            border-radius: (5 / @rootSize);
            margin-right: (10 / @rootSize);
          }
        }
        div {
          font-size: (12 / @rootSize);
          color: #f39800;
          font-weight: 600;
          span {
            border: 0;
          }
        }
      }
    }
  }
}
.more {
  width: (260 / @rootSize);
  height: (38 / @rootSize);
  background-color: #f2f2f3;
  text-align: center;
  line-height: (38 / @rootSize);
  margin-left: (44 / @rootSize);
  margin-bottom: (24 / @rootSize);
  border-radius: (19 / @rootSize);
  a {
    font-size: (12 / @rootSize);
    color: #a0a0a0;
  }
}

footer {
  z-index: 999;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: (50 / @rootSize);
  background-color: #fff;
  font-size: (12 / @rootSize);
  box-shadow: 0 (1 / @rootSize) (20 / @rootSize) rgba(0, 0, 0, 0.3);

  ul {
    width: 100%;
    height: 100%;
    align-items: center;
    display: flex;
    justify-content: space-around;
    text-align: center;

    li {
      a {
        color: #c7c7c7;
        p {
          margin-top: (5 / @rootSize);
        }
      }
      .active {
        color: #333;
      }
    }
  }
}
